<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>

        body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, p, pre, form, fieldset, legend, input, textarea, blockquote, img, button {
            padding: 0;
            margin: 0;
        }
        html{
            color: #333;
        }
        html body {
            background: #ccc;
            min-height: 600px;
            padding-bottom: 50px;
        }
        body, button, input, select, textarea {
            font: 12px/1.5 "Microsoft YaHei"
        }
        div{
            overflow: hidden;
        }
        a{
            text-decoration: none;
        }
        ul,ol{
            list-style: none;
        }
        .gold{
            background: #b4a078;
            color: #fff;
        }
        .center {
            margin-left: auto;
            margin-right: auto;
        }
        .reg_logo img{
            width: 30px;
            height: 30px;
        }
        .reg_logo a{
            margin-top: 0;
            vertical-align: top;
            margin-right: 20px;
            display: inline-block;
            width: 30px;
            height: 30px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="reg">
    <el-container>
        <!--                     注册页头                             -->
        <el-header style="width: 100%;height: auto;background-color:white;
                    box-shadow: 1px 1px 5px;padding: 0">
            <!--页头居中内容-->
            <div class="center" style="width: 980px;height: 60px;padding: 20px 0;">
                <!--趣玩logo超链接-->
                <div style="float: left;margin-left: 10px;">
                    <a href="./" style="width: 400px">
                        <img style="width: 132px;height: 57px;" src="/imgs/logo.gif" alt="">
                    </a>
                </div>
                <!--登录跳转-->
                <p style="float:right;height: 22px;line-height: 20px;margin: 36px 0 0;font-size: 14px">如已注册,点此
                    <a href="/login.html" class="gold"
                       style="width: 49px;height: 22px;border-radius: 2px;
                       margin-left: 6px;display: inline-block;text-align: center">
                        登录
                    </a>
                </p>
            </div>
        </el-header>
        <!--                        注册页体                           -->
        <el-main class="center" style="width: 980px;border-radius: 5px;background-color: white;
                        box-shadow: 1px 1px 5px;margin-top: 50px;padding: 0">
            <!--新用户注册-->



            <ul>
                <li style="text-align: center;color: #b4a078;font-size: 18px;
                           border-bottom: 1px solid;float: left;height: 56px;
                           line-height: 56px;width: 100%">新用户注册</li>
            </ul>




            <!--表单信息-->
            <div style="width: 100%;">
                <el-form label-width="60px" style="width: 400px;margin: 50px auto">


                    <el-form-item>
                        <el-input type="text" v-model="user.username" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="text" v-model="user.email" placeholder="email"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" v-model="user.password" placeholder="密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" v-model="user.confirmPassword" placeholder="确认密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox>我已看过并接受《<a href="" style="color: blue">用户协议</a>》</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="gold"
                                style="width:100%;padding: 15px 0;height: 48px;
                                  text-align: center;font-size: 18px;margin: 0;"
                                @click="reg()">同意协议并注册
                        </el-button>
                    </el-form-item>


                    <!--其他登录方式-->
                    <el-form-item>
                        <div style="height: 50px;line-height: 50px;font-size: 14px;">
                            使用第三方账号登录
                        </div>
                        <div class="reg_logo">
                            <a v-for="url in regLogo" href=""><img :src="url" alt=""></a>
                        </div>
                    </el-form-item>



                </el-form>
            </div>

        </el-main>
    </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#reg',
        data: function () {
            return {
                user:{
                    username:"",
                    email:"",
                    password:"",
                    confirmPassword:""
                },
                regLogo:["/imgs/qq.png","/imgs/weibo.png","/imgs/zhifubao.png","/imgs/weixin.png",]
            }
        },
        methods: {
            reg(){
                axios.post("/reg",v.user).then(function (response) {
                    if (response.data==1){
                        alert("注册成功!")
                        location.href = "/index.html"
                    }else if (response.data==2){
                        v.$message.error("用户已存在!")
                    }
                })
            }
        }
    })
</script>
</html>